<style lang="scss" scoped>
  .body{
    width: 90%;
    padding-left: 3%;
  }
.gongg{
  .el-card__body{
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left{
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right{
      cursor: pointer;
    }
    i{
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini{
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover{
    color: #F56C6C;
  }
  .huifu{
    color: rgb(32, 161, 236);
    margin-left: 20px;
    cursor: pointer;
  }
  .delete{
    color: #F56C6C;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
<template>
  <div>
    <div class="body">
      <h1 style="font-size:25px;">信息管理</h1>

      <el-card class="gongg" shadow="never" style="margin-top:30px;">
        <div class="us el-card__body">
          <div v-if="accountData.length<=0" style="color:#999;text-align:center;font-size:20px;padding:3rem;">
            <br/>
            <br/>
            <br/>
            <br/>
            暂无信息数据
          </div>
          <div style="margin:3rem;" v-if="accountData.length>0">
            <div style="text-align:right;">
              <!-- <el-button @click="upliuyan('123',2)" type="text">全部标为已读</el-button> -->
            </div>
            <el-collapse @change="handleChange" accordion>
              <el-collapse-item  v-for="(item,index) in accountData" :key="index" :name="index">
                <template slot="title">
                  <!-- <el-button icon="el-icon-message" circle></el-button> -->
                  &nbsp;{{item.linkman}}——{{item.phone}} &nbsp; <span style="color:red;font-size:10px;" v-if="!item.isShow">未读</span>
                  <span style="float:right; padding-right:20px; color:#999; font-size:10px;">{{getTime(item.create_at)}}</span>
                </template>
                <div style="text-indent:25px;text-align:right;">
                  <span v-show="item.hostreply" class="huifu">已回复</span> <span @click="handledelete(item)" class="delete">删除</span>
                </div>
                <div style="text-indent:25px;">留言：{{item.conten || ".............."}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div v-if="accountData.length>0" class="block" style="text-align:center; margin-top:5rem; margin-bottom:10rem;">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>

        </div>
      </el-card>

      
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      accountData: [],
    };
  },
  computed: {
    
  },
  mounted() {
    this.getData();
  },
   methods: {
     async handlereply(item){
        this.$prompt('请输入回复内容', '回复'+item.nickName, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async({ value }) => {
            let hostreply = value;
            let res = await this.$http.post('/normal/reviseid',{model:'Reply',id:item._id,obj:{hostreply}});
            if(res.data.data==1){
               this.$message({
                type: 'success',
                message: '回复成功！'
              });
              this.getData();
            }
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消回复'
          });       
        });
     },
    async handledelete(item){
        this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            console.log(item)
            let res = await this.$http.post('/normal/deleteone',{model:'Reply',id:item._id});
            if(res.data.data==1){
              this.getData();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        
      },
      handleChange(val) {
        let _that = this;
        if(parseInt(val)>=0){
          let temp = this.accountData[parseInt(val)];
          if(!temp.isShow){
            _that.upliuyan(temp._id, 1)
          }
        }
      },
      async upliuyan(id,type){
        try {
          let params = { ids: id, types: type };
          let result = await this.$http.post("/reply/isShowliuyan", params);
          if(result.status==200){
            this.getData();
          }
        } catch (error) {
          console.log(error)
        }
      },

      async getData(){
        try {
          let params = { page: this.page, size: this.size};
          let result = await this.$http.post("/reply/getliuyan", { params });
          this.total = result.data.result.total;
          this.accountData = result.data.result.result;
        } catch (error) {
          console.log(error)
        }
      },
      getTime(num) {
        let t = new Date(num);
        return (
          t.getFullYear() + 
          "年" +
          (t.getMonth() + 1) + 
          "月" +
          t.getDate() + 
          "日 "+
          t.getHours() +
          ":" +
          t.getMinutes() +
          ":" +
          t.getSeconds()
        );
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
